<template>
    <div>
        <!-- 组件包含 -->
        <myheader></myheader>
        <br>
        <br>
         <!-- 面包屑导航 -->
           <Breadcrumb :datas="datas"></Breadcrumb>
        <section class="featured-block text-center">
		<div class="container">

            <!-- 注册表单 -->
            <table>
                <tr style="padding:5px">
                    <td>用户名：</td>
                    <td style="padding:5px">
                        <input type="text" v-model="username">
                    </td>
                </tr>
                <br>
                
                <tr>
                    <td style="padding:5px">密码：</td>
                    <td style="padding:5px">
                        <input type="password" v-model="password">
                    </td>
                </tr>

               

                 <tr>
                    <td style="padding:5px"></td>
                    <td style="padding:5px">
                        <Button @click="submit">提交</Button>  &nbsp;&nbsp;
                        <Button color="green" @click="reset">重置</Button>
                    </td>
                </tr>
            </table>

           
           
			
			



		</div>
	</section>

    <myfooter></myfooter>
    </div>
  
</template>

<script>
//导包
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';



export default {
    data(){
        return{
            msg:'这是一个变量',
            //声明面包屑导航
            datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}],
            username:"",
            password:"",
        
        }
    },
    //注册组件标签
    components:{

        'myheader':myheader,
        'myfooter':myfooter
    },
    mounted:function(){

    },
    methods:{
       


        //重置
        reset:function(){
            this.username ='';
            this.password='';


        },
        //提交注册
        submit:function(){
            if(this.username == ""){
                this.$Message('用户名不能为空')
                return false;
            }

            if(this.password == ""){
                this.$Message('密码不能为空')
                return false;
            }
          

            //发送请求
            this.axios.get('http://127.0.0.1:8000/register/',{params:{username:this.username,
            password:this.password}}).then((result) =>{
                console.log(result);
                this.$Message(result.data.message)  


            })
        }

    }

}
</script>

<style>

</style>